<section>
  <div class="page-header">
    <h1>{{vm.article._id ? '编辑爆料' : '新爆料'}}</h1>
  </div>
  <!--<div class="pull-right">-->
    <!--<a ng-show="vm.article._id" class="btn btn-primary" ng-click="vm.remove()">-->
      <!--<i class="glyphicon glyphicon-trash"></i>-->
    <!--</a>-->
  <!--</div>-->
  <div class="spinner-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-show="vm.isLoading">
    <svg class="spinner-container" viewBox="0 0 44 44">
      <circle class="path" cx="22" cy="22" r="20" fill="none" stroke-width="4"></circle>
    </svg>
  </div>

  <div class="col-md-12">
    <form name="vm.form.articleForm" class="form-horizontal" novalidate>
      <fieldset>
        <div class="form-group" show-errors>
          <label class="control-label" for="title">标题</label>
          <input name="title" type="text" ng-model="vm.article.title" id="title" class="form-control" placeholder="Title" required>
          <div ng-messages="vm.form.articleForm.title.$error" role="alert">
            <p class="help-block error-text" ng-message="required">标题不能为空!</p>
          </div>
        </div>

        <div class="form-group">
          <label class="control-label">内容</label>
          <text-angular ng-model="vm.article.content"></text-angular>
        </div>

        <div class="form-group" ng-if="vm.article.imgs.length">
          <label class="control-label">图片</label>
          <ul class="list-unstyled">
            <div class="row">
              <li ng-repeat="pic in vm.article.imgs" class="col-md-4 col-xs-6">
                  <img ng-src="{{pic}}" alt="Error" class="img-thumbnail img-admin-edit">
                  <!--<button class="btn btn-default btn-block" ng-click="vm.deleteShowing(index)">Delete Picture</button>-->
                  <!--<span class="glyphicon glyphicon-search" aria-hidden="true"></span>-->
                  <button class="btn btn-group-lg btn-admin-delete" ng-click="vm.removeImgsFromServer($index)" title="Delete">
                    <i class="glyphicon glyphicon-trash"></i>
                  </button>
              </li>
            </div>
          </ul>
        </div>

        <div class="form-group">
          <label class="control-label">添加图片(总大小限定10M)</label>
          <div class="text-center">
            <button class="btn btn-default btn-block" ngf-select="vm.upload($files)" ngf-multiple="true" accept="image/*">Select Picture</button>
          </div>

          <div class="upload-list">
            <ul class="list-group">
              <li class="list-group-item" ng-repeat="(index, uploadFile) in vm.article.uploadFileList">
                <button class="btn btn-sm btn-danger pull-right my-btn-right-ver-center" ng-click="vm.removeFromUploadList(index)">
                  &times;
                </button>
                <h5 class="list-group-item-heading text-center">{{uploadFile.name}} ({{uploadFile.size | humanReadableFileSizeFilter}}) </h5>
              </li>
            </ul>
          </div>
        </div>

        <div class="form-group">
          <label class="control-label">选择分类</label>
          <div>
            <select ng-model="vm.article.category" class="form-control" ng-options="act for act in vm.article.defaultCategoryList">
              <option value="" selected>--请选择分类--</option>
            </select>
          </div>
        </div>

        <div class="form-group" show-errors>
          <label class="control-label">输入商城</label>
          <div>
            <input name="store" type="text" id="store" ng-model="vm.article.store" class="form-control" placeholder="Amazon.com" required>
          </div>
          <div ng-messages="vm.form.articleForm.store.$error" role="alert">
            <p class="help-block error-text" ng-message="required">商城名不能为空!</p>
          </div>
        </div>

        <div class="form-group" ng-if="vm.isAdminUser();">
          <label class="control-label">是否发表</label>
          <div>
            <select ng-model="vm.article.toPublish" class="form-control" ng-options="publish.id as publish.name for publish in vm.article.publishedList">
              <option value="" selected>--请选择是否发表--</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label class="control-label">购物链接</label>
          <div>
            <input ng-model="vm.article.outLink" class="form-control" placeholder="http://..."></input>
          </div>
        </div>

        <div class="form-group pull-right">
          <button type="button" ng-class="!vm.article._id ? 'btn btn-default btn-success' : 'btn btn-default btn-info'" ng-click="vm.save(vm.form.articleForm.$valid)">
            {{vm.article._id ? '更新' : '创建'}}
          </button>
          <button ng-show="vm.article._id" class="btn btn-default btn-danger" ng-click="vm.remove()">Delete</button>
        </div>
      </fieldset>
    </form>
  </div>
</section>
